<template>
	<view class="container">
		<view class="address-to" @click="handleSelectAddress">
			<u-cell-group style="background-color: #ffffff;">
				<u-cell :isLink="true" class="cell-coupons">
					<view slot="title" @click="handleSelectAddress">
						<view class="coupons">
							<view class="coupons-title">寄送至</view>
							<view class="coupons-price">请选择地址</view>
						</view>
					</view>
				</u-cell>
			</u-cell-group>
		</view>
		<u-popup :show="address_show" @close="address_close" :round="10" :closeable="true">
			<view class="popup">
				<u-list height="700rpx">
					<u-list-item v-for="(item,indx) in address_list.slice(0,4)" :key="item.id">
						<view @click="handleChangeAddress(item)"
							style="border-bottom: 5rpx solid #eee; padding-bottom: 30rpx;">
							<view class="specific-item">
								<view class="address-box" :class="item.id===defaultAddress.id?'selected':''">
									<u-icon name="map" size="50rpx" :color="item.id===defaultAddress.id?'red':''"
										style="margin-right: 15rpx;"></u-icon>
									<view class="address-content">
										<view class="address-detail">
											<view class="real-name">{{item.real_name}}</view>
											<view class="phone">{{item.phone}}</view>
										</view>
										<view class="detail-info">{{item.province+item.city+item.district+item.detail}}
										</view>
									</view>
								</view>
								<view>
									<u-icon v-show="item.id===defaultAddress.id" name="checkbox-mark" size="50rpx"
										color="red"></u-icon>
									<u-icon v-show="item.id!==defaultAddress.id" name="checkbox-mark" size="50rpx"
										color="#ffffff"></u-icon>
								</view>
							</view>
						</view>
					</u-list-item>
				</u-list>
			</view>
		</u-popup>
		<!-- 收货地址 -->
		<view class="address">
			<image src="../../static/img/order/border.png" mode=""></image>
			<view class="title">
				<view class="detail">
					<view class="name">{{defaultAddress.real_name}}</view>
					<view class="phone">{{defaultAddress.phone}}</view>
				</view>
				<view class="default" v-show="defaultAddress.is_default">默认</view>
				<view class="is-default" v-show="!defaultAddress.is_default"></view>
			</view>
			<view class="address-info">
				{{defaultAddress.province+defaultAddress.city+defaultAddress.district+defaultAddress.detail || ''}}
			</view>
		</view>
		<!-- 结算的商品 -->
		<view class="purchase-detail">
			<view class="product" v-for="(item,index) in cartInfo">
				<view class="product-img">
					<image :src="item.productInfo.image" mode=""></image>
				</view>
				<view class="product-content">
					<view class="title">{{item.productInfo.store_name}}</view>
					<view class="specs">
						<text style="padding-right: 40rpx;">{{item.productInfo.attrInfo.suk}}</text>
						<text>X{{item.cart_num}}</text>
					</view>
					<view class="price">￥{{item.productInfo.price}}</view>
				</view>
			</view>
		</view>
		<!-- 商品合计 -->
		<u-cell-group>
			<u-cell>
				<view slot="title">
					<view class="total">
						<view class="total-title">商品合计</view>
						<view class="total-price">￥{{priceGroup.sumPrice}}</view>
					</view>
				</view>
			</u-cell>
		</u-cell-group>

		<!-- 优惠价 -->
		<u-cell-group>
			<u-cell>
				<view slot="title">
					<view class="freight">
						<view class="freight-title">已优惠</view>
						<view class="freight-price">￥{{discounted_price}}</view>
					</view>
				</view>
			</u-cell>
		</u-cell-group>

		<!-- 优惠券 -->
		<u-cell-group style="background-color: #ffffff;">
			<u-cell :isLink="true" class="cell-coupons">
				<view slot="title" @click="coupons_show=true">
					<view class="coupons">
						<view class="coupons-title">优惠券</view>
						<view class="coupons-price">{{selectedCoupons}}</view>
					</view>
				</view>
			</u-cell>
		</u-cell-group>
		<!-- 选择优惠券 -->
		<u-popup :show="coupons_show" @close="couponsClose" :round="10" closeable>
			<view class="select-coupons">
				<view class="title">优惠券</view>
				<view class="item" v-for="(item,index) in couponsData">
					<view class="money" :style="item.cid===2 ? 'background-color: #edbb75;':''">
						<view class="money-bg">
							<view class="money-num">￥{{item.coupon_price}}</view>
							<view class="money-limit">满{{item.use_min_price}}元可用</view>
						</view>
					</view>
					<view class="text">
						<view class="content">
							<view class="title">
								<view class="type"
									:style="item.cid===2 ? 'background-color: #fef7ec;color:#eec181;border-color: #eec181;':''">
									{{item.category_id===1?'品类券':'通用券'}}
								</view>
								<view class="name">{{item.coupon_title}}</view>
							</view>
							<view class="intro">领取后{{item.coupon_time}}天内可用</view>
						</view>
						<view class="selected">
							<u-checkbox-group @change="handleSelectCoupons(item)">
								<u-checkbox activeColor="red" shape="circle"
									:checked="item.coupon_title===selectedCoupons"></u-checkbox>
							</u-checkbox-group>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
		<!-- 备注 -->
		<view class="remark">
			<view class="explain">备注说明</view>
			<u--textarea v-model="remark" placeholder="请输入内容" confirmType="done"></u--textarea>
		</view>

		<!-- 下单部分 -->
		<view class="order">
			<view class="total-price">合计：￥{{priceGroup.sumPrice}}</view>
			<view class="total-option" @click="handlePayment">下单</view>
		</view>
	</view>
</template>

<script>
	import { order, user } from "../../api/index.js";
	export default {
		async onLoad(cartId) {
			this.coupons_list.new = uni.getStorageSync('new');
			Object.assign(this.coupons_list, cartId);
			await this.getDeafultAddress();
			await this.getAddressList();
			await this.getOrderList(this.coupons_list);
			await this.getCouponsList(this.price, this.coupons_list);
		},
		data() {
			return {
				defaultAddress: {},
				address_show: false,
				address_list: [],
				orderData: {},
				cartInfo: [],
				priceGroup: {},
				coupons_list: {
					new: 0,
					shippingType: 1,
				},
				price: '',
				coupons_show: false,
				couponsData: [],
				selectedCoupons: '请选择',
				orderKey: '',
				changeCoupons: {
					addressId: '',
					couponId: '',
					payType: '',
					useIntegral: 0,
				},
				discounted_price: '0.00',
				remark: "",
			}
		},
		methods: {
			// 获取默认地址
			async getDeafultAddress() {
				let { status, msg, data } = await order.default_address();
				if (status === 200) {
					this.defaultAddress = data;
					this.changeCoupons.addressId = data.id;
				}
			},
			address_close() {
				this.address_show = false;
			},
			handleSelectAddress() {
				this.address_show = true;
			},
			// 获取收货地址列表
			async getAddressList() {
				let { status, msg, data } = await user.address_list();
				if (status === 200) {
					this.address_list = data;
				}
			},
			// 切换收货地址
			handleChangeAddress(item) {
				this.defaultAddress = item;
				this.changeCoupons.addressId = item.id;
			},
			// 购物车编号
			async getCartNum() {
				let { status, msg, data } = await order.cart_num();
				if (status === 200) {

				}
			},
			// 获取下单商品列表
			async getOrderList(cartId) {
				let { status, msg, data } = await order.confirm_order(cartId);
				if (status === 200) {
					this.orderData = data;
					this.cartInfo = data.cartInfo;
					this.priceGroup = data.priceGroup;
					this.price = data.priceGroup.totalPrice;
					this.orderKey = data.orderKey;
				}
			},
			// 优惠券列表
			async getCouponsList(price, coupons_list) {
				let { status, msg, data } = await order.coupons_list(price, coupons_list);
				if (status === 200) {
					this.couponsData = data;
				}
			},
			couponsClose() {
				this.coupons_show = false;
			},
			// 选择优惠券
			async handleSelectCoupons(item) {
				this.selectedCoupons = item.coupon_title;
				this.changeCoupons.couponId = item.id;
				this.coupons_show = false;
				let { status, msg, data } = await order.order_money(this.orderKey, this.changeCoupons);
				if (status === 200) {
					this.priceGroup.sumPrice = data.result.total_price;
					this.discounted_price = data.result.coupon_price;
					uni.showToast({
						title: msg,
						duration: 2000,
						icon: 'success'
					})
				}
			},
			// 下单
			async handlePayment() {
				let { status, msg, data } = await order.order_create(this.orderKey, this.changeCoupons);
				if (status === 200) {
					console.log(data.result.orderId);
					let { status: orderStatus, data: orderData } = await order.order_detail(data.result.orderId);
					if (orderStatus === 200) {
						uni.setStorageSync('orderDetail', orderData);
						uni.navigateTo({
							url: '/pages/order/order',
						})
					}
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #f4f4f4;
	}

	.container {

		.address-to {
			background-color: #ffff;
		}

		.popup {

			/deep/ .u-list {
				padding: 40rpx 20rpx;
				margin-top: 20rpx;

				.u-list-item {
					margin: 30rpx;

					.specific-item {
						display: flex;
						justify-content: space-around;
						align-items: center;

						.address-box {
							display: flex;
							justify-content: space-around;
							align-items: center;

							.address-content {

								.address-detail {
									display: flex;
									justify-content: space-between;
									align-items: center;
									margin-bottom: 20rpx;

									.real-name {
										font-weight: bold;
									}

									.phone {
										font-weight: bold;
									}
								}
							}
						}

						.selected {
							color: red;
							font-weight: bold;
						}
					}
				}
			}


		}

		.address {
			width: 650rpx;
			background-color: #ffff;
			margin: 20rpx auto;
			position: relative;
			padding: 30rpx 30rpx 40rpx 30rpx;
			box-shadow: 5px 5px 5px #c5bdbd;

			image {
				width: 100%;
				height: 6rpx;
				position: absolute;
				top: 0;
				left: 0;
			}

			.title {
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 28rpx;
				color: #555555;
				margin-bottom: 40rpx;

				.detail {
					width: 70%;
					display: flex;
					justify-content: space-between;
					align-items: center;
				}

				.default {
					width: 70rpx;
					height: 30rpx;
					line-height: 30rpx;
					text-align: center;
					font-size: 20rpx;
					color: #c55a5c;
					border: 2rpx solid #c55a5c;
					border-radius: 8rpx;
				}

				.is-default {
					width: 70rpx;
					height: 30rpx;
				}
			}

			.address-info {
				font-size: 24rpx;
				color: #666666;
			}
		}

		.purchase-detail {
			background-color: #ffff;

			.product {
				display: flex;
				justify-content: space-around;
				align-items: center;
				padding: 18rpx 25rpx;
				border-bottom: 2rpx solid #eee;

				.product-img {

					image {
						width: 160rpx;
						height: 160rpx;
					}
				}

				.product-content {

					.title {
						font-size: 26rpx;
						color: #555555;
						width: 400rpx;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						margin-bottom: 30rpx;
					}

					.specs {
						font-size: 24rpx;
						color: #999999;
						margin-bottom: 30rpx;
					}

					.price {
						font-size: 24rpx;
						color: #999999;
					}
				}
			}
		}

		.u-cell {

			/deep/ .u-cell__body {
				padding: 0rpx;

				.total {
					padding: 35rpx 20rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					background-color: #ffff;

					.total-title {
						font-size: 26rpx;
						color: #555555;
					}

					.total-price {
						font-size: 26rpx;
						color: #c55a5c;
					}
				}

			}

		}


		.freight {
			padding: 35rpx 20rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			background-color: #ffff;

			.freight-title {
				font-size: 26rpx;
				color: #555555;
			}

			.freight-price {
				font-size: 26rpx;
				color: #c55a5c;
			}
		}

		.cell-coupons {
			/deep/.u-cell__body {
				background-color: #ffffff;
				padding-right: 15rpx;
			}

			.coupons {
				padding: 35rpx 20rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				background-color: #ffff;

				.coupons-title {
					font-size: 26rpx;
					color: #555555;
				}

				.coupons-price {
					font-size: 26rpx;
					color: #555555;
				}
			}
		}

		.select-coupons {
			padding: 30rpx;
			height: 800rpx;

			.title {
				font-size: 35rpx;
				font-weight: bold;
				text-align: center;
			}

			.item {
				display: flex;
				justify-content: space-around;
				align-items: center;
				width: 100%;
				height: 180rpx;
				margin: 20rpx 0rpx;
				box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.06);

				.money {
					width: 30%;
					background-color: #e93323;
					height: 100%;
					line-height: 90rpx;

					.money-bg {
						background-repeat: no-repeat;
						background-size: 100% 100%;
						background-image: url('../../static/img/order/bg-money.png');
						text-align: center;

						.money-num {
							font-size: 50rpx;
							color: #ffffff;
						}

						.money-limit {
							font-size: 30rpx;
							color: #ffffff;
						}
					}
				}

				.text {
					width: 70%;
					padding: 20rpx;
					display: flex;
					justify-content: space-around;
					align-items: center;

					.content {

						.title {
							display: flex;
							justify-content: flex-start;
							align-items: center;
							margin-bottom: 40rpx;

							.type {
								width: 75rpx;
								height: 35rpx;
								padding: 0 10rpx;
								line-height: 35rpx;
								text-align: center;
								background: #e933231a;
								border: 1px solid #e93323;
								opacity: 1;
								border-radius: 11px;
								font-size: 18rpx;
								color: #e93323;
								margin-right: 15rpx;
							}

							.name {
								font-size: 28rpx;
								font-weight: bold;
							}
						}

						.intro {
							font-size: 22rpx;
							color: #999999;
							;
						}

					}
				}
			}
		}

		.remark {
			font-size: 28rpx;
			background-color: #ffff;
			padding: 35rpx 20rpx;
			color: #555555;

			.explain {
				margin-bottom: 30rpx;
			}
		}

		.order {
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 94rpx;
			background-color: #ffff;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 28rpx;

			.total-price {
				padding: 34rpx 0rpx 31rpx 20rpx;
				color: #c55a5c;
				font-weight: bold;
			}

			.total-option {
				width: 234rpx;
				height: 100%;
				color: #ffff;
				text-align: center;
				line-height: 94rpx;
				background-color: #c55a5c;
			}
		}
	}
</style>